<template>
    <div>
        <!--右边-->
        <div class="h-27">
            <div class="h-28">
                <ul class="h-29">
                    <li @click="changerStatus(-1)" :class="{'active':cateStatus==-1}" ><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/gp.png"/><img class="h2-30" src="@/assets/image/gp_on.png"/></div>
                        <div class="h-31">全部挂牌(<span>{{whole}}</span>)</div>
                    </a></li>
                    <li @click="changerStatus(0)" :class="{'active':cateStatus==0}"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/sh.png"/><img class="h2-30" src="@/assets/image/sh_on.png"/></div>
                        <div class="h-31">待审核(<span>{{wait}}</span>)</div>
                    </a></li>
                    <li @click="changerStatus(1)" :class="{'active':cateStatus==1}"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/gp.png"/><img class="h2-30" src="@/assets/image/gp_on.png"/></div>
                        <div class="h-31">挂牌成功(<span>{{tradingSucc}}</span>)</div>
                    </a></li>
                    <li @click="changerStatus(2)" :class="{'active':cateStatus==2}"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/qd.png"/><img class="h2-30" src="@/assets/image/qd_on.png"/></div>
                        <div class="h-31">待签订(<span>{{finalTrial}}</span>)</div>
                    </a></li>
                    <li @click="changerStatus(3)" :class="{'active':cateStatus==3}"><a href="javascript:;">
                        <div class="h-30"><img class="h1-30" src="@/assets/image/cj.png"/><img class="h2-30" src="@/assets/image/cj_on.png"/></div>
                        <div class="h-31">已成交(<span>{{businessSucc}}</span>)</div>
                    </a></li>
                </ul>
            </div>
            <div class="h-32">
                <!--<div class="h-33">全部挂牌(<span>20</span>)</div>-->
                <div class="h-34-box">
                    <ul class="h-34">
                        <li v-for="item in tradingList" :key="item.product_id" >
                          <a href="javascript:;">
                            <div class="h-38">
                              <div class="h-35"><span class="h-36">{{item.product_name}}</span><span class="h-37"><img src="@/assets/image/fa-eye.png"/><span>{{item.see_num}}</span></span></div>
                              <div class="h-39">要求:{{item.delist_text}}</div>
                              <div class="h-40">
                                <div class="h-41">
                                  <div class="h-42">挂牌类型</div>
                                  <div class="h-43">{{item.trading_type==0?"作品挂牌":"项目挂牌"}}</div>
                                </div>
                                <div class="h-41">
                                  <div class="h-42">许可</div>
                                  <div class="h-43">{{item.permission_type==0?"专用许可":"非专有许可"}}</div>
                                </div>
                                <div class="h-41">
                                  <div class="h-42">出让专利</div>
                                  <div class="h-43">{{item.empower_type==0?"部分":"全部"}}</div>
                                </div>
                                <div class="h-41">
                                  <div class="h-42">作品类型</div>
                                  <div class="h-43">{{item.type==0?"作品":"项目"}}</div>
                                </div>
                                <div class="h-41">
                                  <div class="h-42">创建时间</div>
                                  <div class="h-43">{{$moment(item.create_time).format('YYYY-MM-DD HH:mm')}}</div>
                                </div>
                              </div>
                            </div>
                      <object class="h-44">
                          <a href="javascript:;" class="h-45" @click="edit(item)" v-if="item.state==0 || item.state==1 || item.state==2 || item.state==3 || item.state==4">编辑</a>
                          <a href="javascript:;" class="h-46" @click="signProject(item)" v-if="item.state==4 || item.state==42">去签订</a>
                          <a href="javascript:;" class="h-46" @click="submitCheck(item)" v-if="item.state==0 || item.state==1 || item.state==3">提交审核</a> 
                          <a href="javascript:;" class="h-46" @click="changeUPstate(item)" v-if="(item.state==6|| item.state==7 ) && item.up_state==1">下架</a>
                          <a href="javascript:;" class="h-46" @click="changeUPstate(item)" v-if="(item.state==6|| item.state==7 ) && item.up_state==0">上架</a>
                          <a href="javascript:;" class="h-47" v-if="item.state==41">签订中</a>
                           <a href="javascript:;" class="h-46" @click="pay(item)" v-if="item.state==5 ">去支付</a>
                          <a href="javascript:;" class="h-47">{{item.empower_type==1?'全部转让':'部分转让'}}</a>
                      </object>
                            
                           
                          
                          
                          
                           
                            

                            <div class="a-28">
                              <span v-if="item.state==0">草稿</span>
                           <span v-if="item.state==1">被驳回</span>
                                    <span v-if="item.state==2">待审核</span>
                                    <span v-if="item.state==3">初审通过</span>
                                    <span v-if="item.state==4">终审通过</span>
                                    <span v-if="item.state==5">签订完成</span>
                                    <span v-if="item.state==6">部分交易完成</span>
                                    <span v-if="item.state==7">全部交易完成</span>
                                    

                              <!-- <span v-if="item.state==0">草稿</span>
                              <span v-if="item.state==1">被驳回</span>
                              <span v-if="item.state==2 || item.state==3">审核中</span>
                              <span v-if="item.state==4">待签订</span>
                              <span v-if="(item.state==5|| item.state==6) && item.up_state==0">已下架</span>
                              <span v-if="(item.state==5|| item.state==6) && item.up_state==1">已上架</span>
                              <span v-if="item.state==7">全部售出</span> -->
<!--                              <span>{{item.empower_type==1?'全部转让':'部分转让'}}</span>-->
                            </div>
                          </a>
                        </li>

                    </ul>
                </div>
              <div class="a-35 h-48">
               <el-pagination
                             @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 50, 100, 200]"
      :page-size="pageSize"
    layout=" pager"
    :total="total">
  </el-pagination>
              </div>
            </div>
        </div>
        <div style="clear: both;"></div>

        <!-- 签订协议的PDF -->

      

    </div>
</template>

<script>
  import {tradinglist,tradingCont,upTrading,lowTrading,submitApprove,getTardingContract} from '@/api/myTrading'
   
  import * as  pdfjsLib from 'pdfjs-dist'
  import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'
  const baseUrl = process.env.VUE_APP_BASE_API;
    var _self;
    export default {
        name: "myTrading",
        components:{
        //  pdf
        },
        data(){
          return{
            type:1,
            dialognima:false,
            tradingList:[],   //我的挂牌集合
            cateStatus:-1,//默认的查询类别
            currentPage:1,//当前页
            pageSize:10,//一页面显示多少条
            total:0,//总数
             whole:0,
            wait:0,
            tradingSucc:0,
            finalTrial:0,
            businessSucc:0,
            dataIntegrity:0,
            dialognima:false,
            signDialog:false,//签协议的全屏弹窗
            url:"http://119.97.184.132:8080/profile/upload/2020/08/29/f9374060-a479-4b76-9817-9bfe06d3526b.pdf",
            pdfDoc: null,
            totalPage: 0,
            uploadUrls: baseUrl+'api/file/imageUpload',//上传图片路径
            imageUrl:"http://119.97.184.132:8080/profile/upload/2020/08/29/58f19557-d7dc-4816-92b7-3c35b1d0636d.png",
          }
        },
        created(){
          _self = this;
          _self.init()
          pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;
          
        },
        
        methods:{

          init(){
            let data = {"state":_self.cateStatus,"currentPage":_self.currentPage,"size":_self.pageSize}
            tradinglist(data).then((res)=>{
              //console.log(res);
              if(res.code==200){
                _self.tradingList = res.data.tradeNewsList;
                _self.total = res.data.totalResult;
              }
            })
            tradingCont().then((res)=>{
              if(res.code==200){
                 _self.whole=res.data.whole;
            _self.wait=res.data.wait;
            _self.tradingSucc=res.data.tradingSucc;
            _self.finalTrial=res.data.finalTrial;
            _self.businessSucc=res.data.businessSucc;
            _self.dataIntegrity=res.data.dataIntegrity;
              }
            })
          },
         handleSizeChange:function(e){
           
            _self.pageSize = e;
            _self.init();
        },
        handleCurrentChange:function(e){
           
            _self.currentPage=e;
            _self.init();
        },
        changerStatus:function(data){
            console.log(data);
            _self.cateStatus=data;
            _self.init();
        },
        changeUPstate(data){
          let param ={"product_id":data.product_id}
         // console.log(param);
          
          if(data.up_state==0){
            //执行上架
            upTrading(param).then((res)=>{
              if(res.code==200){
                _self.$message({
               message: '上架成功',
              type: 'success'
             });
             _self.init();
              }
            })
          }else{
           lowTrading(param).then((res)=>{
              if(res.code==200){
                _self.$message({
               message: '下架成功',
              type: 'success'
             });
             _self.init();
              }
            })
          }
          
        },
        submitCheck(data){
          let param ={"product_id":data.product_id}
          submitApprove(param).then((res)=>{
             if(res.code==200){
                _self.$message({
               message: '提交审核成功，请等待审核',
              type: 'success'
             });
             _self.init();
              }
          })
        },
        edit(data){
          
          _self.$router.push({
                name:'editTrading',
                 query:{
                   productId:data.product_id
              }
            })
        },
        signProject(item){
          let data = {"productId":item.product_id}
           getTardingContract(data).then((res)=>{
             if(res.code==200){
               _self.init();
             }
           })
      //  _self.$router.push({
      //           name:'signTrading',
      //            query:{
      //              product:item.product_id,
      //              delistId:item.delistId
      //         }
      //       })
          
        },

    handleAvatarSuccess(res) {
        this.imageUrl = res.url;
      },
      pay(item){
          _self.$router.push({
                name:'pay',
                 query:{
                   contractId:item.contractId
              }
            })
        },
    
    

         
          
        }
    }
</script>

<style >

.el-pager li{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100%;
    border: 1px solid #d1d1d1;
    color: #cdcdcd;
    font-size: 16px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    vertical-align: top;
    margin-right: 20px;
    }
    .el-pager li.active{
       
    color: #ffa426;
    border-color: #ffa426;

    }
    .el-pager li:hover{
        color: #ffa426;
    }
    .el-pagination .btn-next,.el-pagination .btn-prev{
        padding-top: 14px;
    }
.sign .el-dialog__body{
      height: 80%;
    }
.sign-page{
  height: 100%;
  background: #f1f1f1
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  @import "../../css/index.css";
  @import "../../css/user_listing.css";
  @import "../../css/idangerous.swiper.css";
</style>
